import { Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import Image from "next/image"
import Link from "next/link"

export default function MusicPlatform() {
  const hotSongs = [
    {
      id: 1,
      title: "新发现！周传雄的情歌宝藏",
      playCount: "30.0万",
      image: "/placeholder.svg",
    },
    {
      id: 2,
      title: "抖音最火：单曲循环的热门歌曲",
      playCount: "2357.7万",
      image: "/placeholder.svg",
    },
    {
      id: 3,
      title: "单依纯｜天生歌者，绝美嗓音",
      playCount: "2974.9万",
      image: "/placeholder.svg",
    },
    {
      id: 4,
      title: "车载DJ热歌: 轻松一路Fun肆嗨!",
      playCount: "2.5亿",
      image: "/placeholder.svg",
    },
    {
      id: 5,
      title: "车载动感DJ｜强节奏鼓点神曲",
      playCount: "4749.1万",
      image: "/placeholder.svg",
    },
  ]

  const newSongs = [
    {
      id: 1,
      title: "外婆话",
      artist: "陆泽",
      duration: "03:00",
      image: "/placeholder.svg",
    },
    {
      id: 2,
      title: "90S",
      artist: "ICE杨长青/Gibb-Z/TrickYzb",
      duration: "03:00",
      image: "/placeholder.svg",
    },
  ]

  return (
    <div className="min-h-screen bg-background">
      {/* Top Navigation */}
      <nav className="border-b">
        <div className="container mx-auto flex items-center justify-between h-16 px-4">
          <div className="flex items-center space-x-8">
            <Link href="/" className="text-lg font-semibold text-primary">
              音乐平台
            </Link>
            <div className="hidden md:flex items-center space-x-6">
              <Link href="#" className="text-sm">
                音乐馆
              </Link>
              <Link href="#" className="text-sm">
                我的音乐
              </Link>
              <Link href="#" className="text-sm">
                社区
              </Link>
            </div>
          </div>
          <div className="flex items-center space-x-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <input
                type="search"
                placeholder="搜索音乐、MV、歌单、用户"
                className="pl-10 pr-4 py-2 w-64 rounded-md border bg-background"
              />
            </div>
            <Button variant="ghost">登录</Button>
          </div>
        </div>
      </nav>

      {/* Main Navigation */}
      <div className="border-b">
        <div className="container mx-auto px-4">
          <div className="flex space-x-8">
            {[
              { name: "首页", href: "/" },
              { name: "歌手", href: "/singers" },
              { name: "新碟", href: "/new" },
              { name: "排行榜", href: "/rank" },
              { name: "分类歌单", href: "/playlists" },
              { name: "MV", href: "/mv" },
            ].map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className="py-4 text-sm hover:text-primary border-b-2 border-transparent hover:border-primary"
              >
                {item.name}
              </Link>
            ))}
          </div>
        </div>
      </div>

      {/* Content */}
      <main className="container mx-auto px-4 py-8">
        {/* Hot Songs */}
        <div className="mb-12">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-bold">热门歌单</h2>
            <Link href="#" className="text-sm text-muted-foreground hover:text-primary">
              更多
            </Link>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
            {hotSongs.map((song) => (
              <div key={song.id} className="group relative">
                <div className="aspect-square overflow-hidden rounded-lg">
                  <Image
                    src={song.image || "/placeholder.svg"}
                    alt={song.title}
                    width={400}
                    height={400}
                    className="object-cover transition-transform group-hover:scale-105"
                  />
                </div>
                <div className="mt-3">
                  <h3 className="text-sm font-medium line-clamp-2">{song.title}</h3>
                  <p className="text-xs text-muted-foreground mt-1">播放量：{song.playCount}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* New Songs */}
        <div>
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-bold">新歌首发</h2>
            <Link href="#" className="text-sm text-muted-foreground hover:text-primary">
              播放全部
            </Link>
          </div>
          <div className="space-y-4">
            {newSongs.map((song) => (
              <div key={song.id} className="flex items-center space-x-4 p-2 rounded-lg hover:bg-accent">
                <Image
                  src={song.image || "/placeholder.svg"}
                  alt={song.title}
                  width={56}
                  height={56}
                  className="rounded"
                />
                <div className="flex-1">
                  <h3 className="font-medium">{song.title}</h3>
                  <p className="text-sm text-muted-foreground">{song.artist}</p>
                </div>
                <span className="text-sm text-muted-foreground">{song.duration}</span>
              </div>
            ))}
          </div>
        </div>
      </main>
    </div>
  )
}

